<nz-card nzTitle="实时数据" class="card-box">
  <div nz-row>
    <div nz-col nzSpan="6" class="col-box">
      <h3>22</h3>
      <div>今日接口总数</div>
    </div>
    <div nz-col nzSpan="6" class="col-box">
      <h3>9999</h3>
      <div>今天访问次数</div>
    </div>
    <div nz-col nzSpan="6" class="col-box">
      <h3>0.00</h3>
      <div>当前QPS</div>
    </div>
    <div nz-col nzSpan="6" class="col-box">
      <h3>0</h3>
      <div>当前并发数</div>
    </div>
  </div>
</nz-card>
<nz-card class="card-box">
  <div nz-row class="row">
    <div nz-col nzSpan="4" class="select-box">
      <label>资源分类:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        (ngModelChange)="resourceChange($event)"
      ></nz-select>
    </div>
    <div nz-col nzSpan="5" *ngIf="selectedValue === '2'">
      <nz-alert
        class="alert-box"
        nzBanner
        nzType="error"
        nzMessage="当启用appid或来源IP限流时，才统计相关流量数据"
      ></nz-alert>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="5" class="select-box">
      <label>前端服务名:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        (ngModelChange)="resourceChange($event)"
      ></nz-select>
    </div>
    <div nz-col nzSpan="5" class="select-box">
      <label>服务IP:</label>
      <nz-select
        [nzOptions]="optionList"
        nzSize="large"
        nzAllowClear
        (ngModelChange)="resourceChange($event)"
      ></nz-select>
    </div>
    <div nz-col nzSpan="10" class="select-box">
      <label>时间范围: &nbsp; &nbsp; </label>
      <nz-date-picker
        [nzDisabledDate]="disabledStartDate"
        nzShowTime
        nzFormat="yyyy-MM-dd HH:mm:ss"
        nzPlaceHolder="Start"
        (nzOnOpenChange)="handleStartOpenChange($event)"
        nzSize="large"
      ></nz-date-picker>
      &nbsp;- &nbsp;
      <nz-date-picker
        #endDatePicker
        [nzDisabledDate]="disabledEndDate"
        nzShowTime
        nzFormat="yyyy-MM-dd HH:mm:ss"
        nzPlaceHolder="End"
        (nzOnOpenChange)="handleEndOpenChange($event)"
        nzSize="large"
      ></nz-date-picker>
    </div>
  </div>
</nz-card>
